/*
 * @Description: 文本溢出悬浮展示组件
 * @Author: ZhangHan
 * @Date: 2025-04-23 10:34:30
 * @LastEditTime: 2025-04-23 11:18:43
 * @LastEditors: ZhangHan
 */
import React from 'react';
import { Typography, Tooltip } from "antd";
import { ProEliipsisProps } from "./prop";

const { Text, Paragraph } = Typography;

const ProEllipsis = (props: ProEliipsisProps) => {
  // 解构并设置默认值
  const {
    text,
    tipText,
    maxWidth = 250,
    height = 22,
    copyable = false,
    rows = 1,
    tipWidth = 300,
    color
  } = props;

  // 计算样式
  const overlayStyle = { maxWidth: `${tipWidth}px` };
  const tyStyle: React.CSSProperties = {
    maxWidth: `${maxWidth}px`,
    maxHeight: `${height}px`,
    marginBottom: 0,
    color: color,
  };

  // 判断是否显示多行 Paragraph
  const showParagraph = rows > 1;

  return (
    <Tooltip 
      title={tipText || text} 
      style={overlayStyle}
    >
      {showParagraph ? (
        <Paragraph
          style={tyStyle}
          ellipsis={{ rows }}
          copyable={copyable ? { text: text, tooltips: false } : false}
        >
          {text}
        </Paragraph>
      ) : (
        <Text
          style={tyStyle}
          ellipsis
          copyable={copyable ? { text: text, tooltips: false } : false}
        >
          {text}
        </Text>
      )}
    </Tooltip>
  );
};

export default ProEllipsis;